<template>
  <div>
    <div class="yonghubox">
      <div class="gerenzhongxing">个人中心</div>
      <div class="fanhui">
        <van-icon name="arrow-left" color="green" size="20"  @click="$router.push('/layout')" />
      </div>

      <div class="touxiangbox">
        <div class="touxiang">用户头像</div>
        <div>
          <span class="haoma">188***8888</span>
        </div>
        <div>
          <van-icon name="arrow" size="30" color="white" @click="togerenzhongxin" />
        </div>
      </div>
    </div>
    <div>
      <div class="dingdan">
        <div class="zi" @click="goGoods">全部订单</div>
      </div>
      <div class="diangdanxaingqing">
        <div class="tu">
          <img src="../../imges/待支付.png" alt="" />
          <div class="tuzi" @click="goGoods">待支付</div>
        </div>
        <div class="tu">
          <img src="../../imges/待发货.png" alt="" />
          <div class="tuzi" @click="goGoods">待发货</div>
        </div>
        <div class="tu">
          <img src="../../imges/待收货.png" alt="" />
          <div class="tuzi" @click="goGoods">待收货</div>
        </div>
        <div class="tu">
          <img src="../../imges/开发票.png" alt="" />
          <div class="tuzi" @click="goGoods">开发票</div>
        </div>
        <div class="tu">
          <img src="../../imges/已完成.png" alt="" />
          <div class="tuzi" @click="goGoods">已完成</div>
        </div>
      </div>
    </div>
    <div class="danyuange">
      <van-cell-group>
        <van-cell title="我的收藏" is-link icon="location-o"  @click="tomyPocket" />
        <van-cell title="我的足迹" is-link icon="location-o" @click="tomyFootprint"/>
        <van-cell title="地址管理" is-link icon="location-o" @click="tomapMange"/>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { Cell, CellGroup } from "vant";

Vue.use(Cell);
Vue.use(CellGroup);
import Vue from "vue";
import { Icon } from "vant";

Vue.use(Icon);
export default {
  data() {
    return {};
  },

  components: {},

  computed: {},

  methods: {
    goGoods() {
      this.$router.push("/goodse");
    },
    togerenzhongxin(){
      this.$router.push("/zhongXin");
    },
    tomyPocket(){
      this.$router.push("/myPocket");
    },
    tomyFootprint(){
      this.$router.push("/myFootprint");
    },
    tomapMange(){
      this.$router.push("/mapMange");
    },
  },
};
</script>
<style lang="less" scoped>
.gerenzhongxing {
  text-align: center;
  padding-top: 10px;
}
.yonghubox {
  width: 100%;
  height: 200px;
  background-color: #484c5b;
}
.haoma {
  font-size: 20px;
  color: white;
}
.touxiang {
  width: 100px;
  height: 100px;
  background: white;
  text-align: center;
  line-height: 100px;
}
.touxiangbox {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 25px;
}
.xiajiantou {
  font-size: 30px;
}
.fanhui {
  margin: -10px 5%;
}
.dingdan {
  width: 100%;
  height: 25px;

  border: solid 1px rgb(241, 244, 244);
}
.zi {
  position: absolute;
  right: 10px;
  margin-top: 5px;
}
.diangdanxaingqing {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 70px;
  border: solid 1px rgb(241, 244, 244);
}
.tu > img {
  width: 25px;
  height: 25px;
  margin-top: 10px;
}
.tu {
  width: 40px;
  height: 40px;
  font-size: 12px;
  text-align: center;
}
.tuzi {
  margin-top: 10px;
}
.danyuange {
  margin-top: 5px;
}
</style>
